<div class="modal" ng-controller="SaveDecisionTableCtrl">
  <div class="modal-dialog">
    <div class="modal-content">
      <form name="decisionTableForm">
        <div class="modal-header">
          <h2>{{ 'DECISION-TABLE.POPUP.SAVE-DECISION-TABLE-TITLE' | translate }}</h2>
        </div>
        <div class="modal-body">
          <p>{{ 'DECISION-TABLE.POPUP.SAVE-DESCRIPTION' | translate }}</p>
          <div
            ng-if="saveDialog.errorMessage && saveDialog.errorMessage.length > 0"
            class="alert error"
            style="font-size: 14px; margin-top:20px"
          >
            <div class="popup-error" style="font-size: 14px">
              <span class="glyphicon glyphicon-remove-circle"></span>
              <span>{{ saveDialog.errorMessage }}</span>
            </div>
          </div>
          <div class="form-group" ng-class="{'has-error': decisionTableForm.name.$invalid}">
            <label for="decisiontableName">{{ 'DECISION-TABLE.NAME' | translate }}</label>
            <input
              ng-disabled="model.loading"
              type="text"
              class="form-control"
              name="name"
              ng-required="true"
              id="decisiontableName"
              ng-model="saveDialog.name"
              maxlength="400"
              auto-focus
              editor-input-check
            />
          </div>
          <div class="form-group" ng-class="{'has-error': decisionTableForm.key.$invalid}">
            <label for="decisiontableKey">{{ 'DECISION-TABLE.KEY' | translate }}</label>
            <input
              ng-disabled="model.loading"
              type="text"
              class="form-control"
              name="key"
              maxlength="255"
              ng-required="true"
              id="decisiontableKey"
              data-ng-trim="false"
              spaceless-value
              ng-model="saveDialog.key"
              editor-input-check
              ng-pattern="keyFieldPattern"
            />
          </div>
          <div class="form-group">
            <label for="decisiontableDescription">{{ 'DECISION-TABLE.DESCRIPTION' | translate }}</label>
            <textarea
              ng-disabled="model.loading"
              class="form-control"
              id="decisiontableDescription"
              rows="5"
              ng-model="saveDialog.description"
            ></textarea>
          </div>
          <div class="checkbox" ng-show="!error && !error.isConflict">
            <label>
              <input type="checkbox" ng-disabled="status.loading" ng-model="saveDialog.newVersion" />
              {{ 'MODEL.SAVE.NEWVERSION' | translate }}
            </label>
          </div>
          <div class="form-group" ng-if="saveDialog.newVersion">
            <label for="commentTextArea">{{ 'MODEL.SAVE.COMMENT' | translate }}</label>
            <textarea
              id="commentTextArea"
              class="form-control"
              ng-model="saveDialog.comment"
              ng-disabled="status.loading"
            ></textarea>
          </div>
          <div ng-if="saveDialog.validationErrors" class="alert error" style="font-size: 14px; margin-top:20px">
            <div class="popup-error" style="font-size: 14px">
              <span class="glyphicon glyphicon-remove-circle"></span>
              <span translate="MODEL.VALIDATIONERRORS" translate-values="error"></span>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <div class="pull-right">
            <button class="btn btn-sm btn-default" ng-click="cancel()" ng-disabled="model.loading" translate>
              GENERAL.ACTION.CANCEL
            </button>
            <button
              class="btn btn-primary"
              ng-click="saveAndClose()"
              ng-disabled="status.loading || !decisionTableForm.$valid || readOnly"
              ng-show="!error && !error.isConflict"
              translate
            >
              ACTION.SAVE-AND-CLOSE
            </button>
            <button
              class="btn btn-primary"
              ng-click="save()"
              ng-disabled="status.loading || !decisionTableForm.$valid || readOnly"
              ng-show="!error && !error.isConflict"
              translate
            >
              ACTION.SAVE
            </button>
          </div>
          <div class="loading pull-right" ng-show="model.loading">
            <div class="l1"></div>
            <div class="l2"></div>
            <div class="l2"></div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
